<template>
  <div>
    <nav-header
      :headerTitle="'我的商品'"
      :headerNext="'添加商品'"
      @tap2next="goUrl('editProduct',{shopId:params.shopId})"
      :navBgColor="'#fff'"
    ></nav-header>
    <section class="page">
      <div class="null32"></div>
      <van-list
        class="articlelist"
        v-model="params.loading"
        :finished="params.finished"
        finished-text="没有更多了"
        @load="gainArticleListByPages"
        :error.sync="params.error"
        error-text="请求失败，点击重新加载"
      >
        <ProductItems :ProductItems.sync="ProductItems" @ProductItemsClick="ProductItemsClick"></ProductItems>
      </van-list>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import { List } from "vant";
Vue.use(List);
import navHeader from "@/components/NavHeader";
import ProductItems from "@/components/ProductItems";
import mixin from "@/utils/mixin";
export default {
  name: "MoreShop",
  mixins: [mixin],
  components: {
    navHeader,
    ProductItems
  },
  data() {
    return {
      show: {},
      params: {
        shopId: "",
        pageSize: 15,
        pageNum: 1,
        error: false,
        loading: false,
        finished: false
      },
      ProductItems: []
    };
  },
  created() {
    this.params.shopId = this.$route.query.shopId;
  },
  mounted() {},
  methods: {
    //list加载分页
    gainArticleListByPages() {
      this.$http.post("product/getProductInfoByPagination", this.params).then(
        res => {
          let resData = res.data;
          this.ProductItems = this.ProductItems.concat(resData.items);
          ++this.params.pageNum;
          // 加载状态结束
          this.params.loading = false;
          // 数据全部加载完成
          if (resData.pages < this.params.pageNum) {
            this.params.finished = true;
          }
        },
        err => {
          this.params.error = true;
          console.log(err);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.null32 {
  width: 100%;
  height: 32px;
}
.null48 {
  width: 100%;
  height: 48px;
}
.null78 {
  width: 100%;
  height: 78px;
}
.page {
  margin-top: 86px;
}
</style>
